<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dzc otp</title>
</head>
<body>
    <h1>Register</h1>
    <form id="registerForm">
        <input type="text" placeholder="Username" id="usernameReg">
        <input type="password" placeholder="Password" id="passwordReg">
        <button type="submit">Register</button>
    </form>

    <h1>Login</h1>
    <form id="loginForm">
        <input type="text" placeholder="Username" id="usernameLogin">
        <input type="password" placeholder="Password" id="passwordLogin">
        <button type="submit">Login</button>
    </form>

    <h1>OTP Verification</h1>
    <form id="otpForm">
        <input type="text" placeholder="Username" id="usernameOTP">
        <input type="text" placeholder="OTP" id="otpValue">
        <button type="submit">Verify OTP</button>
    </form>

    <div id="qrCodeContainer"></div>

    <script>
        document.getElementById('registerForm').addEventListener('submit', async function (e) {
            e.preventDefault();
            const username = document.getElementById('usernameReg').value;
            const password = document.getElementById('passwordReg').value;
            const response = await fetch('/register', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ username, password })
            });
            if (response.status === 201) {
                const data = await response.json();
                const qrCodeContainer = document.getElementById('qrCodeContainer');
                qrCodeContainer.innerHTML = `<img src="${data.qrCode}" />`;
                alert('Registration successful!');
            } else {
                const data = await response.json();
                alert(data.error || 'Registration failed.');
            }
        });

        document.getElementById('loginForm').addEventListener('submit', async function (e) {
            e.preventDefault();
            const username = document.getElementById('usernameLogin').value;
            const password = document.getElementById('passwordLogin').value;
            const response = await fetch('/login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ username, password })
            });
            if (response.status === 200) {
                alert('Login successful!');
            } else {
                const data = await response.json();
                alert(data.error || 'Login failed.');
            }
        });

        document.getElementById('otpForm').addEventListener('submit', async function (e) {
            e.preventDefault();
            const username = document.getElementById('usernameOTP').value;
            const otpValue = document.getElementById('otpValue').value;
            const response = await fetch('/otp/verify', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ username, otpValue })
            });
            if (response.status === 200) {
                alert('OTP verification successful!');
            } else {
                const data = await response.json();
                alert(data.error || 'OTP verification failed.');
            }
        });
    </script>
</body>
</html>